<template>
	<div class="view-full message">
		<ul class="menus">
			<router-link tag="li" v-for="(v, i) in list" :key="'msg' + i" :to="{path: v.path, query: {type: v.type}}">
				<figure><img :src="require('@/assets/message/'+ i +'@2x.png')"></figure>
				<span>{{v.name}}</span>
				<i class="icon iconfont icon-jiantouyou">
					<span v-if="v.total > 0">{{(v.total*1 > 10) ? '9+' : v.total}}</span>
				</i>
			</router-link>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '闪问',
					path: '/messageList',
					total: 0,
					type: '1'
				},
				{
					name: '闪答',
					path: '/messageList',
					total: 0,
					type: '2'
				},
				{
					name: '咨询回复',
					path: '/messageList',
					total: 0,
					type: '3'
				},
				{
					name: '开运好物',
					path: '/messageList',
					total: 0,
					type: '4'
				},
				{
					name: '系统消息',
					path: '/messageList',
					total: 0,
					type: '0'
				}
			],
		}
	},
	methods: {
		getMessageSummary() { // 获取消息通知
			let params = {
				userId: this.$store.state.userId
			}
			this.$http.fetchGet('getMessageSummary', params).then(res => {
				if(res.code == 200) {
					let data = res.data;
					for(let item in data) {
						if(data[item].msgType == '闪问消息') {
							this.list[0].total = data[item].msgAmount * 1
						}
						if(data[item].msgType == '闪答消息') {
							this.list[1].total = data[item].msgAmount * 1
						}
						if(data[item].msgType == '咨询消息') {
							this.list[2].total = data[item].msgAmount * 1
						}
						if(data[item].msgType == '购物消息') {
							this.list[3].total = data[item].msgAmount * 1
						}
						if(data[item].msgType == '系统消息') {
							this.list[4].total = data[item].msgAmount * 1
						}
					}	
				} else {
					console.log(res.msg)
				}
			}, err => {
				console.log(err)
			})
		}
	},
	mounted() {
		this.getMessageSummary()
	}
}
</script>

<style scoped lang="less">
.menus {
	li {
		.pl(20);
		.pr(20);
		.mb(10);
		.h(90);
		display: flex;
		align-items: center;
		background: #fff;
		&:active{
			background-color: @bgColor;
		}
		figure {
			.mr(20);
			img {
				display: block;
				.w(68);
				.h(68);
			}
		}
		span {
			.f28;
			flex: 1;
			color: #020202;
		}
		.icon {
			.f24;
			color: #999999;
			position: relative;
			span{
				position: absolute;
				left: 0;
				top: 0;
				.ml(-40);
				.mt(-3);
				.w(30);
				.h(30);
				.lh(30);
				.f20;
				border-radius: 50%;
				background: red;
				color: #fff;
				text-align: center;
			}
		}
	}
}
</style>
